<template>
  <div class="app-container">
    <!--为echarts准备一个具备大小的容器dom-->
    <el-col :span="30" class="card-box">
      <el-card>
        <el-button @click="openChina">城市标注</el-button>
        <template #header>
          <span>登陆折线</span>
          <el-button style="float: right" @click="exportPdf()">导出PDF</el-button>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div id="main" style="width: 1200px; height: 300px"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" class="card-box">
      <el-card>
        <template #header>
          <span>测试柱图</span>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div id="barTu" style="width: 600px; height: 300px"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" class="card-box">
      <el-card>
        <template #header>
          <span>测试饼图</span>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div ref="pieMi" style="width: 600px; height: 300px"></div>
        </div>
      </el-card>
    </el-col>

    <el-dialog :title="titleCh" :visible.sync="openCa" width="1000px" append-to-body>
      <div id="openCh" style="height: 500px; width: 1000px"></div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import api from '@/api/system/log'
import dataJson from '@/assets/data.json'
export default {
  data() {
    return {
      charts: '',
      xValue: [],
      yValue: [],
      yuValue: [],

      titleCh: '城市标注',
      openCa: false
    }
  },
  created() {
    api.loginCount().then(res => {
      if (res.code === 200) {
        this.xValue = res.data.zxMap.xValue
        this.yValue = res.data.zxMap.yValue
        this.yuValue = res.data.yuMap
        this.$nextTick(function() {
          this.drawLine('main')
          this.barTu('barTu')
          this.pieTu()
        })
      }
    })
  },
  mounted() {
  },
  methods: {
    openChina() {
      this.openCa = true
      this.$nextTick(function() {
        const myChart = echarts.init(document.getElementById('openCh'))
        const uploadDataUrl = dataJson
        console.log(uploadDataUrl)
        // 注册地图
        echarts.registerMap('china', uploadDataUrl)
        const option = {
          geo: {
            // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
            map: 'china',
            roam: false, // 是否允许鼠标滚动放大，缩小
            aspectScale: 0.75,
            zoom: 1.1
          },
          series: [
            {
              name: '在地图中显示散点图',
              type: 'scatter',
              color: '#ef7878',
              coordinateSystem: 'geo', // 设置坐标系为 geo
              data: [
                // 这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
                { name: '北京', value: [116.41995, 40.18994] },
                { name: '郑州', value: [113.665412, 34.757975] },
                { name: '拉萨', value: [91.140856, 29.645554] },
                { name: '昆明', value: [102.81844, 24.906231] },
                { name: '广州', value: [113.26453, 23.155008] }
              ]
            },
            {
              type: 'map',
              map: 'china',
              select: false,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: 'rgb(178,174,177)',
                  borderColor: 'rgb(249, 214, 90)',
                  borderWidth: 1
                }
              },
              emphasis: {
                itemStyle: {
                  areaColor: '#58f1c8', // 鼠标选择区域颜色
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(215,204,204,0.5)'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1d4de9'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183, 185, 14)'
                  }
                }
              },
              zoom: 1.1

            },
            // 地图的线路图动画效果相关设置
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4,
                trailLength: 0.6,
                symbol: 'arrow',
                symbolSize: 7
              },
              lineStyle: {
                normal: {
                  color: '#1DE9B6',
                  width: 1,
                  opacity: 0.1,
                  curveness: 0.3
                }
              },
              data: []
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        //  //设置区分（哪条线属于什么）
        legend: {
          data: ['每日数据', '测试数据']
        },
        // 设置区分（每条线是什么颜色，和 legend 一一对应）
        color: ['#07f541', '#545251'],

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          // 坐标轴两边不留白
          boundaryGap: false,
          // data: this.xValue,
          data: this.xValue,
          // name: '时间',
          // // 坐标轴名称的文字样式
          // nameTextStyle: {
          //   color: '#FA6F53',
          //   fontSize: 16,
          //   padding: [0, 0, 0, 20]
          // },
          // 坐标轴轴线相关设置。
          axisLine: {
            lineStyle: {
              // color: '#FA6F53' X名称颜色
            }
          }
        },
        yAxis: {
          // name: '',
          // data: [1, 2, 3, 4, 5, 6, 7],
          // nameTextStyle: {
          //   color: '#0c13a6',
          //   fontSize: 16,
          //   padding: [0, 0, 10, 0]
          // },
          axisLine: {
            lineStyle: {
              // Y轴颜色
              color: '#FA6F53'
            }
          },
          type: 'value'
        },

        series: [
          {
            name: '每日数据',
            data: this.yValue,
            // line:折线图 (平滑线smooth: true) (下面加色areaStyle:{color: 'pink'}) 柱状图:bar 饼形图:pie(中空的radius: [80, 50])
            type: 'line',
            smooth: true,
            // areaStyle: { color: 'pink' },
            // 线条样式
            lineStyle: {
              // color: '#08e83f' 线的颜色
            }
          },
          {
            name: '测试数据',
            data: [10, 20, 10, 20, 10, 20, 10, 20, 10, 20],
            type: 'line',
            // areaStyle: { color: 'blue' },
            lineStyle: {
              // color: '#545251' 线的颜色
            }
          }
        ]
      })
    },
    barTu(id) {
      echarts.init(document.getElementById(id)).setOption({
        // 图表的标题
        title: { text: '' },
        // 图表的提示
        tooltip: {},
        // 图例
        legend: { data: ['柱形数据', '折线数据'] },
        toolbox: { feature: { saveAsImage: {}}},
        // x轴线
        xAxis: {
          data: this.xValue,
          // 名称过长,加个偏斜的角度
          axisLabel: { interval: 0, rotate: 20 }
        },
        // grid: {
        //   left: '20%',   // grid 组件离容器左侧的距离
        //   right: '30px', // grid 组件离容器右侧的距离
        //   bottom: '20%'  // grid 组件离容器下边距的距离
        // },
        // y轴线
        yAxis: {},
        // 设置数据
        series: [
          {
            // 数据名称
            name: '柱形数据',
            // 类型为柱状图
            type: 'bar',
            // 数据data
            data: this.yValue
          },
          {
            // 数据名称
            name: '折线数据',
            // 类型为柱状图
            type: 'line',
            // 数据data
            data: this.yValue
          }
        ]
      })
    },
    pieTu() {
      echarts.init(this.$refs.pieMi).setOption({
        calculable: true,
        toolbox: { feature: { saveAsImage: {}}},
        tooltip: {
          trigger: 'item',
          formatter: '语言 <br/>{b} : {c} ({d}%)'
        },
        // 左上角小标签
        legend: {
          orient: 'vertical',
          left: 'left',
          right: 20
        },
        series: {
          type: 'pie',
          // 半径
          radius: ['30%', '80%'],
          // roseType: 'area',
          // 位移
          // left: -80,
          // top: -270,
          // 数据
          data: this.yuValue
        }
      })
    },
    exportPdf() {
      this.htmlToPdf('card-box', '硝烟')
    }
  }
}
</script>

<style scoped>

</style>
